<script lang="ts" setup>
import { ref, inject } from "vue";
import { ElMessage } from "element-plus";
type propsType = {
  parentId?: number | null;
  placeholder?: string;
};
const props = withDefaults(defineProps<propsType>(), {
  postId: -1,
  parentId: null,
  placeholder: "留下你的评论吧~",
});
const refreshComment = inject<() => Promise<any>>("refreshComment",()=>Promise.resolve());
const createComment =
  inject<
    (content: string, parentId: number | null) => Promise<any>
  >("createComment", () => Promise.resolve());
const refreshChildrenComments = inject<() => void>("refreshChildrenComments",()=>{});
const comment = ref<string>("");
const isInput = ref<boolean>(false);
const handleComment = async (): Promise<void> => {
  await createComment!(comment.value, props.parentId!);
  if (!props.parentId) await refreshComment!();
  else refreshChildrenComments!();
  comment.value = "";
  ElMessage.success("评论成功");
};
</script>
<template>
  <div class="conInput">
    <form style="width: 100%">
      <el-input
        :placeholder="placeholder"
        type="textarea"
        size="small"
        maxlength="200"
        :rows="4"
        resize="none"
        :autosize="{ minRows: 2, maxRows: 4 }"
        v-model="comment"
        @focus="isInput = true"
        @blur="isInput = false"
      />
    </form>
    <el-button type="primary" @click="handleComment"> 发布 </el-button>
  </div>
</template>
<style lang="scss" scoped>
.conInput {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: self-end;
  background-color: #fff;
  position: sticky;
  top: -20px;
  z-index: 10;
  .el-button {
    width: 50px;
    height: 25px;
    font-size: 13px;
    margin-top: 10px;
  }
}
</style>
